<template>
	<view @click="close()" class="searchPage">
			<uni-nav-bar  :border="border" fixed="true" status-bar="true" backgroundColor="#fff">
				<!-- left-icon="back" :status-bar="true"  @clickLeft="NavBar()"-->
				<view style="position: relative;" class="inputBox">
					<input :focus="setFocus" @confirm="adddately()" @input="onKeyUserNameInput" class="input1" type="text" placeholder="请输入搜索关键字" v-model="searchValue" />
					
				
					<view class="eliminate" @click="eliminate()">×</view>
					<image @click="adddately()" class="searchBtn" style="width: 50upx;height: 50upx;" src="../static/images/ss_search.jpg" mode=""></image>
				</view>
				<view class="cancel" @click="toDome()">取消</view>
				<!-- <view  class="inputBox" style="width: 700rpx">
					<view class="input1" >
						<input @confirm="adddately()" style="color:#333;width: 700rpx;" placeholder-style="color:#999;" v-model="searchValue" class="tac fs21 Cccc" type="text" placeholder="搜索商品名称"  value=""/>
					</view>	
				</view> -->
			</uni-nav-bar>
			<view class="datelyBox" :style="{'top':(topHeight-15)+'rpx'}" v-if="searchValue && recommend && RecommendList.length>0">
				<scroll-view scroll-y="true" style="height: 300rpx;">
					<view class="ListBox" v-for="(item,index) in RecommendList" :key="index" @click="setkeyword(item.title)">{{item.title}}</view>
				</scroll-view>
			</view>		
		<view class="flex">
			<view style="text-align: center;width: 50%;font-size: 38rpx;" class="Nav" v-for="(item,index) in NavList" :key="index" :class="num==index?'active':''" @click="NavBtn(index)">{{item}}</view>
		</view>
		
		<view style="background-color: #FFFFFF;" v-if="!IsShow">
			<view v-if="!onLineOrNot" class="">
				<view class="title">
					<view class="fl fs21 bold C333">
						最近搜索
					</view>
					<view @click="isShow1()" class="fr">
						<image style="width: 50upx;height: 50upx;" src="../static/images/ss_del.jpg" mode=""></image>
					</view>
				</view>
				
				<view class="products">
					<view @click="ClickHistory(item)" v-if="index<15" v-for="(item,index) in localData" :key="index"  class="productName fs18 C666">			
						{{item}}	
					</view>
				</view>
			</view>
			
			<view v-if="onLineOrNot" class="">
				<view class="title">
					<view class="fl fs21 C333">
						最近搜索
					</view>
					<view @click="isShow1()" class="fr">
						<image style="width: 50upx;height: 50upx;" src="../static/images/ss_del.jpg" mode=""></image>
					</view>
				</view>
				
				<view class="products">
					<view @click="ClickHistory(item.name)" v-if="index<15" v-for="(item,index) in latelySearch" :key="index"  class="productName fs18 C666">			
						{{item.name}}	
					</view>
				</view>
			</view>
			
			<view style="clear: both;" class="title">
				<view class="fl fs21  C333" style="color: #ff4300;">
					热门搜索 
				</view>			
			</view>
			
			<view class="products">
				<view @click="ClickHistory(item)"  v-for="(item,index) in hotSearch" :key="index"  class="productName fs18 C666">				
					{{item}}				
				</view>
			</view>
		</view>
		
		<!-- 商品 -->
		<view v-if="num==0">
		<view v-if="IsShow">
			<view class="sortType">
				<view @click.stop="sort(11)" v-if="flag11" class="fs21">
					<text>综合排序</text>				
				</view>
				<view  style="position: relative;" @click="sort(12)" v-if="!flag11" class="fs21">
					<text class="Cfe0000">综合排序</text>					
					<view style="display: none;" @click.stop class="sortBox">
						<view @click.prevent="check(1)"  class="sortInnerbox">
							<view class="fl fs18 Cfe0000">
								价格从低到高
							</view>
							<view class="fr">
								<image v-if="this.checkNum==1" style="width: 40upx;height: 40upx;" src="../static/images/search_check.jpg" mode=""></image>
							</view>
						</view>
						<view @click.prevent="check(2)" class="sortInnerbox">
							<view class="fl fs18 Cfe0000">
								价格从高到低
							</view>
							<view class="fr">
								<image  v-if="this.checkNum==2"  style="width: 40upx;height: 40upx;" src="../static/images/search_check.jpg" mode=""></image>
							</view>
						</view>
						<view @click.prevent="check(3)" class="sortInnerbox">
							<view class="fl fs18 Cfe0000">
								评价由高到低
							</view>
							<view class="fr">
								<image  v-if="this.checkNum==3"  style="width: 40upx;height: 40upx;" src="../static/images/search_check.jpg" mode=""></image>
							</view>
						</view>
						<view @click.prevent="check(4)" class="sortInnerbox">
							<view class="fl fs18 Cfe0000">
								最新发布商品
							</view>
							<view class="fr">
								<image  v-if="this.checkNum==4"  style="width: 40upx;height: 40upx;" src="../static/images/search_check.jpg" mode=""></image>
							</view>
						</view>						
					</view>
				</view>
				
				<view @click="sort(21)" v-if="flag21" class="fs21">
					<text>销量</text>
					<image src="../static/images/search_sjx.jpg" mode=""></image>			
				</view>
				<view @click="sort(22)" v-if="flag22" class="fs21">
					<text class="Cfe0000">销量</text>
					<image src="../static/images/sjx_sx.jpg" mode=""></image>			
				</view>
				<view @click="sort(23)" v-if="flag23" class="fs21">
					<text class="Cfe0000">销量</text>
					<image src="../static/images/sjx_jx.png" mode=""></image>			
				</view>
				
				<view @click="sort(31)" v-if="flag31" class="fs21">
					<text>价格</text>
					<image src="../static/images/search_sjx.jpg" mode=""></image>				
				</view>
				<view @click="sort(32)" v-if="flag32" class="fs21">
					<text class="Cfe0000">价格</text>
					<image src="../static/images/sjx_sx.jpg" mode=""></image>					
				</view>
				<view @click="sort(33)" v-if="flag33" class="fs21">
					<text class="Cfe0000">价格</text>
					<image src="../static/images/sjx_jx.png" mode=""></image>				
				</view>
			</view>
			
			<view class="productLis">											
				<view class="productli" @click="goodsInfo(item)" v-for="(item,index) in searchLisData" :key="index">
					<view class="zk" v-if="item.title">{{item.title}}</view>
					<!-- <view v-if="item.promotion_type == 'groupbuy'" class="zk">抢购 </view>
					<view v-if="item.promotion_type == 'xianshi'" class="zk">限时折扣</view>
					<view v-if="item.promotion_type == 'miaosha'" class="zk">秒杀</view>
					<view v-if="item.promotion_type == 'zhijiang'" class="zk">直降</view>
					<view v-if="item.promotion_type == 'teijia'" class="zk">特价</view>
					<view v-if="item.promotion_type == 'repur'" class="zk">加价购</view>
					<view v-if="item.promotion_type == 'spellgroup'" class="zk">拼团</view>				
					<view v-if="item.promotion_type == 'bargain'" class="zk">砍价</view> -->
					<image style="width: 347upx;height: 344upx;" :src="item.goods_image_url" mode=""></image>
					<view style="padding: 0 10upx;min-height: 65upx;" class="twoline fs18 C333 lh35"><text class="is_tv" v-if="item.is_tv==1">自营</text>{{item.goods_name}}</view>
					<view style="margin-top: 10upx;padding: 0 10upx;display: flex;justify-content: space-between; " class="lastLine">
						<view class="">
							<text class="fs20 Cfe0000" style="line-height: 30rpx;">
								￥{{item.goods_promotion_price}}
							</text>
						</view>
						<view style="line-height: 30rpx;" class="C666 fs18">
							{{item.goods_salenum}}人付款 &nbsp;	
						</view>	
					</view>
				</view>	
			</view>
			
			<view v-if="searchLisData.length<=0">
				<image style="width: 100%;" :src="`${picUrl}/InfoNull.png`" mode="widthFix"></image>
			</view>
		</view>
		</view>
		
		<!-- 品牌 -->
		<view v-if="num==1">
			<view v-if="IsShow">
				<!-- {{list}} -->
				<view class="boxss"  v-for="(item,index) in list" :key="index">
					<view class="ma300">
						<view class="Title" >{{item.name}}</view>
						<!-- name -->
						<view class="main">
							<view v-for="(item2,index2) in item.arr" :key="index2" @click="toDetail(item2.brand_name,item2.brand_id)">
								 <!--  -->
								<image :src="item2.brand_pic" mode=""></image>
								<view class="Name">{{item2.brand_name}}</view>
							</view>
						</view>
					</view>			
				</view>
				<view v-if="list.length<=0">
					<image style="width: 100%;" :src="`${picUrl}/InfoNull.png`" mode="widthFix"></image>
				</view>
			</view>
		</view>
		
		<!-- 店铺 -->
		<view v-if="num==2">
			<view v-if="IsShow">
				<view  class="lis">
					<view class="liBox" v-for="(item,index) in store_list" :key="index">
						<view class="liBoxTop">
							<image style="border-radius: 50%;" class="dpLogo fl" :src="item.store_avatar||'/static/images/userImg111.png'" mode=""></image>
							<view class="liBoxTopC fl">
								<view class="liBoxTopCT bold fs24 C333">{{item.store_name}}</view>
								<view class="liBoxTopCB fs18 C999">收藏:{{item.store_collect}} 好评率:{{item.store_evaluate}}%  销量:{{item.store_sales}}</view>
							</view>
							<view @click="toStore(item.store_id)" class="liBoxTopR fr fs18">进店</view>					
						</view>
						<view style="clear: both;" class="liBoxBottom">
							<view @click="goodsInfo(item2)"  v-for="(item2,index) in item.goods_lists" :key="index" class="liBoxBottomBox" v-if="index<3">
									<image class="imgShoe" :src="item2.goods_image" mode=""></image>
									<view class="price">￥{{item2.goods_price}}</view>
							</view>
						</view>
					</view>
					<view v-if="store_list.length<=0">
						<image style="width: 100%;" :src="`${picUrl}/InfoNull.png`" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>
		
	</view>	
	
	
</template>

<script>
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
	export default {
		components: {
			uniNavBar
		},
		data() {
			return {
				border:false,
				localData:[],
				onLineOrNot:false,
				latelySearch:[],
				hotSearch:[],
				searchLisData:[],
				checkNum:0,
				curpage:1,
				hasmore:false,
				searchValue:"",
				flag11:true,
				flag21:true,
				flag22:false,
				flag23:false,
				flag31:true,
				flag32:false,
				flag33:false,	
				order:"",
				isKey:"",
				RecommendList:[],
				IsShow:false,
				setFocus:true,
				recommend:true,
				NavList:["商品","品牌","店铺"],
				num:0,
				list:[],
				store_list:[],
				letter:["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","X","Y","Z"],
				topHeight:100
			}
		},
		onReachBottom() {
			if(this.hasmore){	
				this.curpage++
				this.getSearchLisData(true)				
			}else{
				uni.showToast({
					title:'没有更多数据了',
					icon:'none'
				})
			}
		},
	
		 onLoad(options){		
			 
			if(options.searchValue){
				this.searchValue=options.searchValue;
				this.getSearchLisData()
			}
			// this.getRecommend();
			uni.getStorage({
			    key: 'api_member_name',
			    success:(res)=> {
			        if(res.data){						
						this.onLineOrNot=true
					}
					if(this.onLineOrNot){						
						this.getHotLisData();
					}					
			    }
			});
			
			uni.getStorage({
			    key: 'localLatelyData',
			    success:(res)=> {
			        console.log(res.data);
					this.localData=res.data
			    }
			});
			this.$util.request({
				url: '/mobile/index.php?act=search&op=hot_history',
				method: 'get',
				data: {
						
				},
			}).then((res)=> {				
					this.hotSearch=res.datas.hot
					for(let i=0;i<this.hotSearch.length;i++){
						for(let j=this.hotSearch.length-1;j>i;j--){
							if(this.hotSearch[i] == this.hotSearch[j]){
								this.hotSearch.splice(j,1)
							}
						}
					}
			})	
			if(this.searchValue.length>0){	
				this.recommend=false
				if(this.onLineOrNot){						
					var aa={}
					aa.datas=this.latelySearch
					var bb={}
					bb.name=this.searchValue
					aa.datas.unshift(bb)				
					aa=JSON.stringify(aa)
					this.$util.request({
						url: '/mobile/index.php?act=member_index&op=member_history_save',
						method: 'post',
						data: {
							"key":this.key,
							"history":aa					
						},
					}).then((res)=> {
						this.getHotLisData()					
					})	
				}
				
				
				this.$util.request({
					url: '/mobile/index.php?act=goods&op=goods_list',
					method: 'get',
					data: {
						"keyword":this.searchValue,				
					},
				}).then((res)=> {
					this.searchLisData=res.datas.goods_list
					this.hasmore=res.datas.paged.hasmore
				})
			}
			this.getTopHe()
		},
		watch:{
			searchValue: {
				deep: true,
				handler: function (newVal,oldVal){
						this.searchValue=this.searchValue.trim()
						this.getRecommend();
				}
			}
		},
		methods: {
			getTopHe(){
				setTimeout(()=>{
					uni.createSelectorQuery().in(this).select('.TopHe').boundingClientRect(result => {
						  if (result) { 
							  this.topHeight=result.height*2
						  }
					 }).exec(); 
				 },1000)
			
			},
			eliminate(){//清除搜索
				this.searchValue = ""
			},
			toStore(id){//进入店铺
				uni.navigateTo({
					url:"/mall/store/store?store_id="+id
				})
			},
			NavBtn(index){
				this.num=index
				this.getSearchLisData()
			},
			getRecommend(){//获取推荐搜索
				let that=this
				if(that.searchValue){
					that.$util.request({
						url: '/mobile/index.php?act=search&op=aotocomplete',
						method: 'get',
						data: {
							"keyword":that.searchValue,
						},
					}).then(function(res) {
						that.RecommendList = res.datas.list
					})
				}
				
			},
			setkeyword(keyword){
				this.setFocus=true
				this.searchValue=keyword
				this.recommend=false
				this.getSearchLisData()
			},
			
			ClickHistory(name){
				this.searchValue=name
				if(!this.onLineOrNot){
					//本地搜索
					this.adddately()
				}else{
					this.getSearchLisData();
					this.adddately()
					this.getHotLisData()
				}
			},
			//获取热门和最近记录接口
			getHotLisData(){
				var that=this
					this.$util.request({
						url: '/mobile/index.php?act=member_index&op=member_history',
						method: 'post',
						data: {
							
						},
					}).then(function(res) {
						console.log(res)
						that.latelySearch=res.datas.history.datas;
						console.log(JSON.stringify(that.latelySearch))
						var result = [];
						var obj = {};
						for(var i =0; i<that.latelySearch.length; i++){
							if(!obj[that.latelySearch[i].name]){
								result.push(that.latelySearch[i]);
								obj[that.latelySearch[i].name] = true;
							 }
						 }		
						that.latelySearch=JSON.parse(JSON.stringify(result))
					})
				
			},
			toDetail(name,id){
				uni.navigateTo({					
					url:"/mall/goods/list?index="+name+"&PPID="+id
				})
			},
			
			//获取商品列表
			getSearchLisData(state){				
				var that=this
				if(this.num==0){
					this.$util.request({
						url: '/mobile/index.php?act=goods&op=goods_list',
						method: 'get',
						data: {
							"key":this.isKey,
							"order":this.order,
							"keyword":that.searchValue,
							curpage:this.curpage
						},
					}).then(function(res) {
						that.hasmore=res.datas.paged.hasmore	
						if(state){
							that.searchLisData=that.searchLisData.concat(res.datas.goods_list)
						}else{
							that.searchLisData=res.datas.goods_list
						}
						that.IsShow=true
					})
				}else if(this.num==1){
					this.$util.request({
						url: '/mobile/index.php?act=brand&op=list',
						method: 'get',
						data: {
							"keyword":that.searchValue
						},
					}).then(function(res) {	
						that.list=res.datas	
						let listdata=[];
						let datalength=res.datas.length;
						that.letter.map((item,index)=>{
							let obj={};
							let arr=[]
							obj.name=item;
							res.datas.map((item2,index2)=>{
								if(item==item2.brand_initial){
									arr.push(item2)							
								}
							})
							obj.arr=arr
							if(arr.length>0){
								listdata.push(obj)
							}
						})
						that.list=JSON.parse(JSON.stringify(listdata))
						that.IsShow=true
					})
				}else if(this.num==2){
					this.$util.request({
						url: '/mobile/index.php?act=store&op=list_app',
						method: 'get',
						data: {
							"keyword":that.searchValue
						},
					}).then(function(res) {			
						that.store_list=res.datas.store_list
						that.IsShow=true
					})
				}
			},
			goodsInfo(item){//跳转商品详情
				uni.navigateTo({
					url:'/mall/goods/info?goods_id='+item.goods_id+'&store_id='+item.store_id
				})
			},
			close(){
				this.flag11=true
			},
			check(num){
				this.checkNum=num
				this.curpage=1
			},
			
			sort(num){//商品排序
				var that=this
				that.curpage=1
				console.log(num)
				// if(that.curpage){
					
				// }else{
					that.searchLisData=[]
				// }
				if(num==11){
					this.flag11=false;
					this.flag21=true;
					this.flag22=false;
					this.flag23=false;
					this.flag31=true;
					this.flag32=false;
					this.flag33=false;
					console.log("开")
					this.order=1
					this.isKey=4
					this.$util.request({
						url: '/mobile/index.php?act=goods&op=goods_list',
						method: 'get',
						data: {							
							"key":"4",
							"order":"1",
							"keyword":that.searchValue,
							curpage:this.curpage
						},
					}).then(function(res) {
						that.hasmore=res.datas.paged.hasmore
						that.searchLisData=res.datas.goods_list;						
					})
					
				}
				if(num==12){
					this.flag11=false;
					this.flag21=true;
					this.flag22=false;
					this.flag23=false;
					this.flag31=true;
					this.flag32=false;
					this.flag33=false;
					console.log("关")
					this.order=0
					this.isKey=4
					this.$util.request({
						url: '/mobile/index.php?act=goods&op=goods_list',
						method: 'get',
						data: {							
							"key":"4",
							"order":"0",
							"keyword":that.searchValue,
							curpage:this.curpage
						},
					}).then(function(res) {
						that.hasmore=res.datas.paged.hasmore
						that.searchLisData=res.datas.goods_list;
					})
				}
				if(num==21){
					this.flag11=true;
					this.flag21=false;
					this.flag22=true;
					this.flag23=false;
					this.flag31=true;
					this.flag32=false;
					this.flag33=false;
					console.log("销量升")
					this.order=1
					this.isKey=1
					this.$util.request({
						url: '/mobile/index.php?act=goods&op=goods_list',
						method: 'get',
						data: {							
							"key":"1",
							"order":"1",
							"keyword":that.searchValue,
							curpage:this.curpage
						},
					}).then(function(res) {
						that.hasmore=res.datas.paged.hasmore
						that.searchLisData=res.datas.goods_list;
					})
				
				}
				if(num==22){
					this.flag11=true;
					this.flag21=false;
					this.flag22=false;
					this.flag23=true;
					this.flag31=true;
					this.flag32=false;
					this.flag33=false;
					this.order=1
					this.isKey=0
					console.log("销量降")
					this.$util.request({
						url: '/mobile/index.php?act=goods&op=goods_list',
						method: 'get',
						data: {							
							"key":"1",
							"order":"0",
							"keyword":that.searchValue,
							curpage:this.curpage
						},
					}).then(function(res) {
						that.hasmore=res.datas.paged.hasmore
						that.searchLisData=res.datas.goods_list;
					})
				}
				if(num==23){

					this.flag11=true;
					this.flag21=false;
					this.flag22=true;
					this.flag23=false;
					this.flag31=true;
					this.flag32=false;
					this.flag33=false;
					console.log("销量升")
					this.order=1
					this.isKey=1
					this.$util.request({
						url: '/mobile/index.php?act=goods&op=goods_list',
						method: 'get',
						data: {							
							"key":"1",
							"order":"1",
							"keyword":that.searchValue,
							curpage:this.curpage
						},
					}).then(function(res) {
						that.hasmore=res.datas.paged.hasmore
						that.searchLisData=res.datas.goods_list;
					})
				}
				if(num==31){
					this.flag11=true;
					this.flag21=true;
					this.flag22=false;
					this.flag23=false;
					this.flag31=false;
					this.flag32=true;
					this.flag33=false;
					console.log("价格升")
					this.order=1
					this.isKey=3
					this.$util.request({
						url: '/mobile/index.php?act=goods&op=goods_list',
						method: 'get',
						data: {							
							"key":"3",
							"order":"1",
							"keyword":that.searchValue,
							curpage:this.curpage
						},
					}).then(function(res) {
						that.hasmore=res.datas.paged.hasmore
						that.searchLisData=res.datas.goods_list;
					})
					
				}
				if(num==32){
					this.flag11=true;
					this.flag21=true;
					this.flag22=false;
					this.flag23=false;
					this.flag31=false;
					this.flag32=false;
					this.flag33=true;
					this.order=0
					this.isKey=3
					console.log("价格降")
					this.$util.request({
						url: '/mobile/index.php?act=goods&op=goods_list',
						method: 'get',
						data: {							
							"key":"3",
							"order":"0",
							"keyword":that.searchValue,
							curpage:this.curpage
						},
					}).then(function(res) {
						that.hasmore=res.datas.paged.hasmore
						that.searchLisData=res.datas.goods_list;
					})
				}
				if(num==33){
					this.flag11=true;
					this.flag21=true;
					this.flag22=false;
					this.flag23=false;
					this.flag31=false;
					this.flag32=true;
					this.flag33=false;
					console.log("价格升")
					this.order=1
					this.isKey=3
					this.$util.request({
						url: '/mobile/index.php?act=goods&op=goods_list',
						method: 'get',
						data: {							
							"key":"3",
							"order":"1",
							"keyword":that.searchValue,
							curpage:this.curpage
						},
					}).then(function(res) {
						that.hasmore=res.datas.paged.hasmore
						that.searchLisData=res.datas.goods_list;
					})
				}				
			},
			onKeyUserNameInput: function(event) {
				this.searchValue = event.target.value;
				if(this.searchValue.length>0){
					this.searchLisData=[]
				}
			},  
			adddately(){//添加搜索列表
				var that=this
				this.recommend=false
				if(that.searchValue.trim().length<1){
					uni.showToast({
					    title: '搜索内容为空',
					    duration: 2000,
						icon:"none"
					});
					return false
				}
				if(!this.onLineOrNot){
					//添加本地记录
					this.localData.push(this.searchValue)
					for(let i=0;i<this.localData.length;i++){
						for(let j=this.localData.length-1;j>i;j--){
							if(this.localData[i] == this.localData[j]){
								this.localData.splice(j,1)
							}
						}
					}
					uni.setStorage({
					    key: 'localLatelyData',
					    data: this.localData,
					    success: ()=> {
					    }
					});
					
				}else{
						var aa={}
						aa.datas=that.latelySearch
						var bb={}
						bb.name=that.searchValue
						aa.datas.unshift(bb)				
						aa=JSON.stringify(aa)
						this.$util.request({
							url: '/mobile/index.php?act=member_index&op=member_history_save',
							method: 'post',
							data: {
								"key":that.key,
								"history":aa					
							},
						}).then((res)=> {
							this.getHotLisData()
						})	
				}
					this.getSearchLisData()
			},
			isShow1(){//清空搜索列表
				if(!this.onLineOrNot){
					//本地存储localLatelyData清空
					this.localData=[]
					uni.removeStorage({
					    key: 'localLatelyData',
					    success: function (res) {}
					});
					
					
				}else{
					this.$util.request({
						url: '/mobile/index.php?act=member_index&op=member_history_del',
						method: 'post',
						data: {
					
						},
					}).then((res)=> {
						console.log(res)	
						this.latelySearch=[]
						this.getHotLisData()
					})
				}

			},
			toDome(){
				let pages = getCurrentPages(); // 当前页面
				if(pages.length > 1){
					uni.navigateBack({})
				}else{
					uni.switchTab({
						url:"/main/home/home"
					})
				}
			}
			
			
			
		}
	}
</script>

<style>
	.eliminate{
		position: absolute;
		top: 2rpx;
		right: 20rpx;
		font-size: 50rpx;
		line-height: 50rpx;
		color: #999999;
	}
	.cancel{
		width:70rpx ;
		color:#666666;
		margin-left: 15rpx;
	}
	.datelyBox{
		background-color: #FFFFFF;position: absolute;width:650rpx;top: 50rpx;z-index: 1000;
		padding: 10rpx;border-radius: 10rpx;box-sizing: border-box;z-index: 999999;border: 1rpx solid #EEEEEE;
		left: 50rpx;
	}
	.ListBox{
		border-bottom: 1rpx solid #EEEEEE;padding:0 20rpx;text-overflow: ellipsis;width: 100%;white-space: nowrap;overflow: hidden;
	}
	.Cfe0000{
		color: #ff4300;
	}
	.Cc06{
		color: #ff4300;
	}
	.mt55mb30{
		margin-top: 55upx;
		margin-bottom: 30upx;
	}
	.Cfff{
		color: #FFFFFF;
	}
	.Cfe0000{
		color: #ff4300;
	}


	.flex{		
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-content: space-between;
	}
	.paddingL20{
		padding-left: 20upx;
	}
	.C999{
		color:#999 ;
	}
	.Cff0101{
		color:#ff0101 ;
	}
	.Cc00251{
		color: #c00251;
	}
	.strick{
		text-decoration: line-through;
	}
	.Cfe0000{
		color: #ff4300;
	}
	.line1{
		width: 430upx;
	}
	.hide{
		display: none;
	}
	.marginB20{
		margin-bottom: 20upx;
	}
	
	.twoline{
	   overflow : hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.oneline{
	   overflow : hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}
	.pl20{
		padding-left: 20upx;
	}
	.positionT{
		position: relative;
		top: 50upx;
	}
	.paddingB15{
		padding-bottom: 15upx;
	}
	.borderB{
		border-bottom: 1px solid #f4f4f6;
	}
	.borderT{
		border-top: 1px solid #f4f4f6;
	}
	.gl{
		position: absolute;
		right: 30upx;
	}
	.lh20{
		line-height: 20upx;
	}
	.lh25{
		line-height: 25upx;
	}
	.lh30{
		line-height: 30upx;
	}
	.lh35{
		line-height: 35upx;
	}
	.pr40{
		padding-right: 40upx;
	}
	.C333{
		color: #333333;
	}
	.C666{
		color: #666666;
	}
	.Cf00{
		color: #ff0000;
	}
	
	.bold{
		font-weight: bold;
	}
	.C1d1d1d{
		color:#1d1d1d ;
	}
	.fs30{
		/* font-size: 30upx */
		font-size: 45upx
	}
	.fs26{
		font-size:39upx
		/* font-size: 26upx */
	}
	.fs12{
		font-size: 18upx
		/* font-size: 12upx */
	}
	.fs16{
		font-size: 24upx
		/* font-size: 16upx */
	}
	.fs14{
		font-size: 21upx
		/* font-size: 14upx */
	}
	.fs15{
		font-size: 22.5upx
		/* font-size: 15upx */
	}
	.fs27{
		font-size: 40.5upx
		/* font-size: 27upx */
	}
	.fs18{
		font-size: 27upx
		/* font-size: 18upx */
	}
	.fs28{
		font-size: 42upx
		/* font-size: 28upx */
	}
	.fs10{
		font-size: 15upx
		/* font-size: 10upx */
	}
	.fs30{
		font-size: 45upx
		/* font-size: 28upx */
	}
	.fs24{
		font-size: 36upx
		/* font-size: 24upx */
	}
	.fs20{
		font-size:30upx
		/* font-size: 20upx */
	}
	.fs22{
		font-size:33upx
		/* font-size: 22upx */
	}
	.fs21{
		font-size: 31.5upx
		/* font-size: 21upx */
	}

	.fr{
		float: right;
	}
	.tac{ 
		text-align: center;
	}
	.Ce5258e{
		color: #e5258e;
	}
	page{
		background-color: #FFFFFF;
		color: rgb(102, 102, 102);
	}
	.searchPage{
		height: 100%;
		background-color: #FFFFFF;
	}
	.topTitle{
		position: relative;
		background-color: #ff4300;		
		/* padding-top:80upx; */
		padding-top:70upx;
		padding-left: 20upx;
		padding-right: 40upx;
		padding-bottom: 10upx;
		
	}
	.inputBox{
		width: 620rpx;
		margin-left:-140rpx;
		/* #ifdef MP-WEIXIN */
			width: 420rpx;
		/* #endif */
	}
	.input1{		
		box-sizing: border-box;
		width:100%;
		height: 61upx;
		line-height: 61upx;
		border-radius: 31upx;
		position: relative;
		top: 0upx;
		padding-left: 60upx;
		padding-right: 80upx;
		color: #666;
		background-color: #FFFFFF;
		border: 1upx solid #ff4300;
		border-radius: 35upx;
	}
	.searchBtn{
		position: absolute;
		left: 8rpx;
		top: 6upx;
		border-radius: 15rpx;
	}
	.productLis{
		box-sizing: border-box;
		padding: 20upx;
		background-color: #f4f4f4;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: wrap;		
	}
	.productli{
		position: relative;
		background-color: #FFFFFF;
		border-radius: 10upx;
		box-sizing: border-box;
		width: 347upx;
		height: 510upx;
		margin-bottom: 20upx;
	}
	.lastLine{
		/* height: 25upx;
		line-height:25upx;	 */
	}

	.sortType{
		height: 88upx;		
		padding: 0 44upx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;	
			background-color: #FFFFFF;
	}
	.sortType>view{
		height: 88upx;	
		line-height: 88upx;
	}
	.sortType image{
		width: 35upx;
		height: 35upx;
		position: relative;
		top: 6upx;
	}
	.sortBox{
		width: 750upx;
		height: 257upx;
		position: absolute;
		background-color: #fff;
		z-index: 100;
		left: -40upx;
		padding: 0 20upx;
	}
	.sortInnerbox{
		height: 63upx;
		line-height: 63upx;
	}
	.sortInnerbox view{
		height: 63upx;
		line-height: 63upx;
	}
	.sortBox>view+view{
		border-top: 1upx solid #f4f4f4 ;
	}
	.sortInnerbox image{
		position: relative;
		left: -50upx;
	}
	
	
	.title{
		padding: 20upx;
		background-color: #FFFFFF;
	}
	.products{
		box-sizing: border-box;
		width: 750upx;
		display: flex;
		flex-direction: row;		
		flex-wrap: wrap;
		padding: 20upx;
		padding-right: 0;
	}
	.productName{
		margin-right: 20upx;
		margin-top: 20upx;
		background-color: #eeeeee;
		height: 46upx;
		line-height: 46upx;
		border-radius: 23upx;
		padding: 2upx 30upx;
		max-width: 200rpx;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}
	.zk{
		/* width: 80upx; */
		padding: 0 15upx;
		height: 40upx;
		background-color:#ff4300;
		color: #FFFFFF;
		text-align: center;
		line-height: 40upx;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
		border-top-left-radius: 10upx;		
	}
	.is_tv{
		background-color: #ff4300;
		color: #FFFFFF;
		padding: 0 5rpx;
		border-radius: 10rpx;
		margin-right: 10rpx;
	}
	.active{
		color: #ff4300;
		font-weight: bold;
	}
	
	
	
	
	
	
	
	
	
	
	.liBox{
		padding: 22upx;
		border-radius: 30upx;
		width: 100%;
		height: 350upx;
		margin: 33upx auto;
		box-shadow: 0 0 20upx 1upx #ededed;
		background-color: #FFFFFF;
		box-sizing: border-box;
	}
	.liBoxTop{
		height: 85upx;
	}
	.dpLogo{
		width: 84upx;
		height: 84upx;
	}
	.liBoxTopC{
		margin-left: 30upx;
		position: relative;
		top: -15upx;
	}
	.liBoxTopR{
		width: 102upx;
		height: 52upx;
		line-height: 52upx;
		border-radius: 26upx;
		color: #e73596;
		text-align: center;
		border: 1px solid #e73596;
		font-weight: bold;
	}
	.liBoxBottom{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-top: 30upx;
	}
	.liBoxBottomBox{
		box-sizing: border-box;
		position: relative;
		width: 200upx;
		height: 200upx;
		border-radius: 25upx;
		border: #cfcfcf solid 1px;
	}
	.imgShoe{
		width: 196upx;
		height: 196upx;
		border-radius: 25upx;
	}
	.ma300{
		/* #ifdef MP-WEIXIN */
		margin-top: 300rpx;
		/* #endif */
	}
	.price{
		position: absolute;
		left: -3upx;
		bottom: -3upx;
		border-bottom-left-radius: 25upx;
		border-top-right-radius: 15upx;
		background-color: #ff4300;
		color: #fff;
		font-size: 24upx;
		min-width: 111upx;
		height: 51upx;
		line-height: 51upx;
		text-align: center;
	}
	
	.fs30{
		/* font-size: 30upx */
		font-size: 45upx
	}
	.fs26{
		font-size:39upx
		/* font-size: 26upx */
	}
	.fs12{
		font-size: 18upx
		/* font-size: 12upx */
	}
	.fs16{
		font-size: 24upx
		/* font-size: 16upx */
	}
	.fs14{
		font-size: 21upx
		/* font-size: 14upx */
	}
	.fs15{
		font-size: 22.5upx
		/* font-size: 15upx */
	}
	.fs27{
		font-size: 40.5upx
		/* font-size: 27upx */
	}
	.fs18{
		font-size: 27upx
		/* font-size: 18upx */
	}
	.fs28{
		font-size: 42upx
		/* font-size: 28upx */
	}
	.fs10{
		font-size: 15upx
		/* font-size: 10upx */
	}
	.fs30{
		font-size: 45upx
		/* font-size: 28upx */
	}
	.fs24{
		font-size: 36upx
		/* font-size: 24upx */
	}
	.fs20{
		font-size:30upx
		/* font-size: 20upx */
	}
	.fs22{
		font-size:33upx
		/* font-size: 22upx */
	}
	.fs21{
		font-size: 31.5upx
		/* font-size: 21upx */ 
	}
	.searchImg{
		top: 38upx;
		right: 50upx;
		position: absolute;
		z-index: 10;
		width: 50upx;
		height: 50upx;			
	}
	.flppdp{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 0 85upx;
		
	}
	.flppdp>view{
		padding: 0 30upx;
	}
	.zhxlpj{
		margin-top: 38upx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 0 85upx;
	}
	.sjx{
		width: 30upx;
		height: 30upx;
		position: relative;
		top: 5upx;
		
	}
	.active1{
		border-bottom: 2px solid #ff4300;
	}
	.liBox{
		padding: 22upx;
		border-radius: 30upx;
		width: 710upx;
		height: 350upx;
		margin: 33upx auto;
		box-shadow: 0 0 20upx 1upx #ededed;
	}
	.liBoxTop{
		height: 85upx;
	}
	.dpLogo{
		width: 84upx;
		height: 84upx;
	}
	.liBoxTopC{
		margin-left: 30upx;
	}
	.liBoxTopR{
		width: 102upx;
		height: 52upx;
		line-height: 52upx;
		border-radius: 26upx;
		color: #e73596;
		text-align: center;
		border: 1px solid #e73596;
		font-weight: bold;
	}
	.liBoxBottom{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-top: 30upx;
	}
	.liBoxBottomBox{
		box-sizing: border-box;
		position: relative;
		width: 200upx;
		height: 200upx;
		border-radius: 25upx;
		border: #cfcfcf solid 1px;
	}
	.imgShoe{
		width: 196upx;
		height: 196upx;
		border-radius: 25upx;
	}
	.price{
		position: absolute;
		left: -3upx;
		bottom: -3upx;
		border-bottom-left-radius: 25upx;
		border-top-right-radius: 15upx;
		background-color: #ff4300;
		color: #fff;
		/* width: 111upx; */
		height: 51upx;
		line-height: 51upx;
		text-align: center;
		/* margin-top: 180rpx; */ 
	}
	.content{
		background-color: #FFFFFF;
		padding:0 20upx;
		margin-top: 40upx;
		height: 100%;
		display: flex;
		box-sizing: border-box;
		margin-top: 180upx;
		/* #ifdef MP-WEIXIN */
		margin-top: 310upx;
		/* #endif */
	}
	.contentLeft{
		background-color: #FFFFFF;
		width: 160upx;
		box-sizing: border-box;
		/* #ifdef H5 */
		height:78vh;
		/* #endif */
		/* #ifdef APP-PLUS */
		height:80vh;
		/* #endif */
		
	}
	.contentLeftLi{
		font-size: 27upx;
		width: 160upx;
		height: 80upx;
		line-height: 80upx;	
		text-align: center;
		background-color: #f8f8f8;
		margin-bottom: 1px;
		border-left: 2px solid #f4f4f4;	
		box-sizing: border-box;
	}
	.active2{
		border-left: 2px solid #ff4300;
		background-color: #fff;
	}
	.contentRight{
		width: 540upx;	
		min-height: 82.5vh;
		padding-bottom: 160upx;
	}
	.banner{
		width: 540upx;
		height: 210upx;
	}
	.banner image{
		width: 540upx;
		height: 210upx;
	}
	.title{
		/* height: 75upx; */
		line-height: 75upx;
		font-size: 27upx;
		padding-left: 30upx;
	}
	.sportLis{
		height: 100%;
		flex-wrap: wrap;
		display: flex;
		/* flex-direction: row; */
		justify-content: flex-start;
		align-content: flex-start;
	}
	.sportLi{
		text-align: center;
		width: 33%;
		/* width: 175upx; */
		height: 200upx;		
	}
	.sportLi:nth-child(3n+2){
		margin-left: 0.5%;
	}
	.sportLi:nth-child(3n){
		margin-left: 0.5%;
	}
	.sportLi view{
		position: relative;
		top: -10upx;
		height: 35upx;
		line-height: 35upx;
		font-size: 27upx;
	}
	.sportLi image{
		width: 120upx;
		height: 120upx;
		margin-top: 20rpx;
	}
	
	/* 品牌样式 */
	.flppdp{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 0 85upx;
		
	}
	.flppdp>view{
		padding: 0 30upx;
	}
	.active11{
		color: #ff4300;
	}
	
	.active1{
		border-bottom: 2px solid #ff4300;
	} 
	.Title{
		padding: 0 20rpx;
		background-color: #F8F8F8;
		margin: 10rpx 0;
	}
	.List image{
		width: 140rpx;
		height: 75rpx;
	}
	.List{
		width: 140rpx;
		margin: 10rpx 15rpx;
	}
	.List .Name{
		font-size: 24rpx;
		text-align: center;
		line-height: 40rpx;
	}
	.main{
		margin: 10rpx 30rpx;
		display: flex;
		flex-wrap: wrap;
		/* justify-content: space-between; */
		
		text-align: center;	
		/* margin-right: 60rpx; */
		
	}
	.main>view{
		/* margin-top: 20upx; */
		margin:10rpx;
	}
	
	.main image{
		width: 140rpx;
		height: 75rpx;
		border: 1upx solid #f4f4f4;
	}
	.main view{
		font-size: 18upx;
		line-height: 30upx;
	}
	.main .Name{
		width: 150upx;
		line-height: 30upx;
		
	}
	.letters {
		position: absolute;
		right: 0upx;
		bottom: 0px;
		width: 60upx;
		top: 200upx;
		color: #343434;
		text-align: center;
		font-size: 20upx;
		/* #ifdef APP-PLUS */
		top: 230upx;
		/* #endif */
	}
	
	.letters-item {
		margin-bottom: 10upx;
	}
	.letters .letters-item:nth-last-child(1){
		margin-bottom: 120rpx !important;
	}
	.calendar-list {
		position: fixed;
		top: 103upx;
		bottom: 0upx;
		width: 100%;
		background-color: #FFFFFF;
	}
	.mask {
		position: absolute;
		bottom: 0upx;
		top: 83upx;
		left: 0upx;
		right: 0upx;
		width: 750upx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgba(0, 0, 0, 0);
	}
	
	.mask-r {
		height: 120upx;
		width: 120upx;
		border-radius: 60upx;
		display: flex;
		background: rgba(0, 0, 0, 0.5);
		justify-content: center;
		align-items: center;
		font-size: 40upx;
		color: #FFFFFF
	}
	.letter-header {
		height: 70upx;
		font-size: 28upx;
		color: #333333;
		padding-left: 20upx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		background-color: #F5F5F5;
	
	}
	.city-div {
		height: 85upx;
		border-bottom-width: 0.5upx;
		border-bottom-color: #ebedef;
		border-bottom-style: solid;
		display: flex;
		align-items: center;
	}
	
	.city {
		font-size: 28upx;
		color: #6d6d6d;
		padding-left: 20upx;
	}
	.boxss{
		
		/* #ifdef APP-PLUS */
		padding-top: 35upx;
		/* #endif */
	}
	.fl{
		float: left;
	}
</style>
